<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <canvas id="canvas" width="300" height="300" style="margin: 10px 0 0 10px;"></canvas>
</body>
<script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    function draw() {


        function setClock() {
            ctx.clearRect(0, 0, 300, 300)

            ctx.save()
            ctx.beginPath()
            ctx.translate(100, 100)
            ctx.arc(0, 0, 100, 0, Math.PI * 2)
            ctx.closePath()
            ctx.stroke()

            ctx.restore()
            ctx.save()
            ctx.beginPath()
            ctx.translate(100, 100)
            ctx.arc(0, 0, 5, 0, Math.PI * 2)
            // ctx.closePath()
            ctx.fill()

            ctx.restore()
            ctx.save()
            ctx.translate(100, 100)
            for (let i = 0; i < 60; i++) {
                ctx.beginPath()
                if (i % 5) {
                    ctx.moveTo(95, 0)
                    ctx.lineTo(100, 0)
                } else {
                    ctx.moveTo(90, 0)
                    ctx.lineTo(100, 0)
                }

                ctx.stroke()
                ctx.rotate((Math.PI * 6) / 180)
                ctx.closePath()
            }


            const date = new Date()
            const hour = date.getHours()
            const min = date.getMinutes()
            const sec = date.getSeconds()

            const _sec = Math.PI / 180 * 6 * sec
            const _min = Math.PI / 180 * 6 * min + _sec / 60
            const _hour = Math.PI / 180 * 30 * hour + _min / 12

            ctx.restore()
            ctx.save()
            ctx.translate(100, 100)
            ctx.rotate(-Math.PI / 2 + _hour)
            ctx.beginPath()
            ctx.moveTo(-4, 0)
            ctx.lineTo(60, 0)
            ctx.lineWidth = 6
            ctx.stroke()
            ctx.closePath()

            ctx.restore()
            ctx.save()
            ctx.translate(100, 100)
            ctx.rotate(-Math.PI / 2 + _min)
            ctx.beginPath()
            ctx.moveTo(-4, 0)
            ctx.lineTo(70, 0)
            ctx.lineWidth = 3
            ctx.stroke()
            ctx.closePath()

            ctx.restore()
            ctx.save()
            ctx.translate(100, 100)
            ctx.rotate(-Math.PI / 2 + _sec)
            ctx.beginPath()
            ctx.moveTo(-4, 0)
            ctx.lineTo(80, 0)
            ctx.lineWidth = 1
            ctx.stroke()
            ctx.closePath()
            window.requestAnimationFrame(setClock)

        }
        window.requestAnimationFrame(setClock)

    }

    draw()
</script>


</html>